<template>
  <div>
    <el-form ref="formSing" :model="formSing" :rules="rulesSing" size="mini" label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="contractName">
            <el-input v-model="formSing.contractName" placeholder="请输入项目名称" disabled="disabled" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人" prop="userId">
            <el-select filterable v-model="formSing.userId" placeholder="请选择" @change="handleHeadUserChange">
              <el-option v-for="item in personOptions" :key="item.userId" :label="item.nickName"
                :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="userPhone">
            <el-input v-model="formSing.userPhone" placeholder="" disabled="disabled" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="对方签订人" prop="otherPartyUser">
            <el-input v-model="formSing.otherPartyUser" placeholder="请输入对方签订人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人均单价" prop="contractStaffMonty">
            <el-input v-model="formSing.contractStaffMonty" placeholder="请输入人均单价" @input="handleChangeInput">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同人数" prop="contractNumber">
            <el-input type="number" v-model="formSing.contractNumber" placeholder="请输入合同人数" @input="handleChangeInput" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="付款方式" prop="paymentType">
            <el-select filterable v-model="formSing.paymentType" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_payment_type" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签订日期" prop="signDate">
            <el-date-picker clearable v-model="formSing.signDate" type="date" value-format="yyyy-MM-dd"
              placeholder="yyyy/mm/日">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算日" prop="settlementDay">
            <el-input v-model="formSing.settlementDay" placeholder="请输入结算日">
              <template slot="append">日</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发票类型" prop="invoiceType">
            <el-select filterable v-model="formSing.invoiceType" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_invoice_type" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始日期" prop="startDate">
            <el-date-picker clearable v-model="formSing.startDate" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择合同开始日期" @change="handleChangeInput">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束日期" prop="endDate">
            <el-date-picker clearable v-model="formSing.endDate" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择合同结束日期"  @change="handleChangeInput">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="合同金额" prop="contractMoney">
            <el-input v-model="formSing.contractMoney" placeholder="请输入合同金额" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司税号" prop="paragraph">
            <el-input v-model="formSing.paragraph" placeholder="请输入公司税号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行" prop="bankName">
            <el-select v-model="formSing.bankName" placeholder="请选择">
              <el-option v-for="dict in dict.type.erp_bank_name" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input v-model="formSing.bankAccount" placeholder="请输入银行账号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否归档" prop="contractFile">
            <el-radio-group v-model="formSing.contractFile" size="medium">
              <el-radio v-for="(item, index) in contractFileOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="contractDesc">
            <el-input v-model="formSing.contractDesc" :rows="4" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="合同扫描件" prop="contractAttrs">
        <file-upload v-model="formSing.contractAttrs" :fileType="['png', 'jpg', 'jpeg', 'pdf']" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import moment from 'moment';
import { addContract, updateContract, getContract } from "@/api/cld/contract";
import { getProject } from "@/api/cld/project";
import { getSysUserList } from "@/api/system/user";
import { validatePhone, bankAccountValid, isidentifyNumber } from '@/utils/validataForm'
import { contractFileOptions } from '@/assets/staticDict'
export default {
  props: {
    projectId: {
      type: Number
    }
  },
  dicts: ['cld_invoice_type', 'cld_payment_type', 'erp_bank_name'],
  data() {
    return {
      formSing: {},
      // 表单校验
      rulesSing: {
        signDate: [
          { required: true, message: "签订日期不能为空", trigger: "blur" }
        ],
        otherPartyUser: [
          { required: true, message: "对方签订人不能为空", trigger: "blur" }
        ],
        contractNumber: [
          { required: true, message: "合同人数不能为空", trigger: "blur" }
        ],
        settlementDay: [
          { required: true, message: "结算日不能为空", trigger: "blur" }
        ],
        invoiceType: [
          { required: true, message: "发票类型不能为空", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "合同开始日期不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "合同结束日期不能为空", trigger: "blur" }
        ],
        paragraph: [
          { required: true, validator: isidentifyNumber, trigger: "blur" },
        ],
        bankName: [
          { required: true, message: "开户行不能为空", trigger: "blur" }
        ],
        bankAccount: [
          { required: true, validator: bankAccountValid, trigger: "blur" }
        ],
        paymentType: [
          { required: true, message: "付款方式不能为空", trigger: "change" }
        ],
        contractMoney: [
          { required: true, message: "合同金额不能为空", trigger: "blur" }
        ],
        contractStaffMonty: [
          { required: true, message: "人均单价(元)不能为空", trigger: "blur" }
        ]
      },
      personOptions: [],
      contractFileOptions: contractFileOptions
    }
  },

  created() {
    this.handleGetListSysUser();
    this.resetContractSigning()
    if (this.projectId) {
      this.handleGetContractInfo();
    }
  },
  mounted() {

  },
  methods: {
    // 获取用户列表
    handleGetListSysUser() {
      getSysUserList().then(res => {
        this.personOptions = res.data;
      })
    },
    /** 负责人选择 */
    handleHeadUserChange(e) {
      let obj = this.personOptions.find(i => { return i.userId == e });
      this.formSing.userPhone = obj.phonenumber;
    },
    handleGetContractInfo() {
      getContract(this.projectId).then(response => {
        if (response.data) {
          this.formSing = response.data;
        } else {
          getProject(this.projectId).then(res => {
            this.formSing.projectId = this.projectId;
            this.formSing.contractName = res.data.projectName;
          })
        }
      });
    },
    // 表单合同签订重置
    resetContractSigning() {
      this.formSing = {
        projectId: null,
        contractNo: null,
        contractName: null,
        signDate: null,
        paymentType: null,
        contractMoney: null,
        contractStaffMonty: null,
        contractNumber: null,
        startDate: null,
        endDate: null,
        contractAttrs: null,
        createName: null,
        contractStatus: null,
        contractFile: 2,
        contractFileAttrs: null,
        contractEndReason: null,
        contractEndTime: null,
        invoiceType: null,
        settlementDay: null,
        paragraph: null,
        bankName: null,
        bankAccount: null,
        userId: null,
        otherPartyUser: null,
        contractDesc: null,
        // 售价信息列表
        unitList: [],
        unitList1: [],
        unitList2: [],
        unitList3: []
      };
      this.resetForm("formSing");
    },
    /** 提交按钮 */
    submitSignForm() {
      this.$refs["formSing"].validate(valid => {
        if (valid) {
          if (this.formSing.contractId != null) {
            updateContract(this.formSing).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$emit('success');
            });
          } else {
            addContract(this.formSing).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$emit('success');
            });
          }
        }
      });
    },
    // 计算合同金额
    handleChangeInput(){
      let contractMoney = 0;
      let diffMonth = 0;
      // 计算合同月份
      if(this.formSing.endDate && this.formSing.startDate){
        diffMonth = moment(this.formSing.endDate).diff(moment(this.formSing.startDate), 'months');
      }
      contractMoney = (this.formSing.contractNumber || 0 ) * (this.formSing.contractStaffMonty || 0) * (diffMonth || 0);
      this.formSing.contractMoney = contractMoney;
    },
  }
}

</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
